<template>
    <div>
         <div class="articleTable module-body">
            <el-row class="add-button">
                <router-link to="/article/edit"><el-button type="primary" size="small" icon="el-icon-plus">添加文章</el-button></router-link>
            </el-row>
            <el-table :data="articleList" style="width: 100%" size="mini">
                <el-table-column prop="name" label="文章名称" width="180">
                </el-table-column>
                <el-table-column prop="name" label="标签" width="180">
                     <template slot-scope="scope">
                        <div class="tmpl">
                           <el-tag v-for="item in scope.row.articleTag" size="mini" :key="item" style="margin-right:10px;">
                                {{ item }}
                           </el-tag>
                        </div>
                    </template>
                </el-table-column>
                 <el-table-column prop="created_at" label="创建时间" width="180">
                </el-table-column>
                 <el-table-column prop="updated_at" label="更新时间" width="180">
                </el-table-column>
                <el-table-column prop="status" label="发布">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-edit" size='mini' circle ></el-button>
                            <el-button type="danger" icon="el-icon-delete" size='mini' circle ></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'ArticleList',
    data() {
        return {
            articleList: [
                {
                    id: 1,
                    name: 'laravel 入门教程',
                    articleTag: ['php', 'laravel'],
                    created_at: '2018-09-11 11:00:00',
                    updated_at: '2018-09-11 11:00:00',
                    status: true
                },
                {
                    id: 1,
                    name: 'Golang',
                    articleTag:['Golang'],
                    created_at: '2018-09-11 11:00:00',
                    updated_at: '2018-09-11 11:00:00',
                    status: false
                }
            ],
            total: 20,
            currentPage1: 1,
        }
    },
    methods:{
        handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
        },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>
